import React from 'react'
import { useCanvasStore } from '../store/canvasStore'

const LayerPanel: React.FC = () => {
  const { canvas, images, selectedImage, setSelectedImage } = useCanvasStore()

  const handleLayerClick = (image: fabric.Image) => {
    if (canvas) {
      canvas.setActiveObject(image)
      setSelectedImage(image)
      canvas.renderAll()
    }
  }

  const handleLayerDelete = (image: fabric.Image) => {
    if (canvas) {
      canvas.remove(image)
      canvas.renderAll()
    }
  }

  return (
    <div className="layer-panel">
      <h3>图层</h3>
      <div className="layer-list">
        {images.map((image, index) => (
          <div
            key={index}
            className={`layer-item ${selectedImage === image ? 'selected' : ''}`}
          >
            <span onClick={() => handleLayerClick(image)}>
              图层 {index + 1}
            </span>
            <button onClick={() => handleLayerDelete(image)}>删除</button>
          </div>
        ))}
      </div>
    </div>
  )
}

export default LayerPanel 